<!--
 * @Description: 菜单列表
 * @Autor: Zhu_liangyu
 * @Date: 2020-05-09 10:52:56
--> 
<template>
  <div>
    <page-table
      rowKey="menuId"
      ref="menuPageTable"
      query-type="list"
      :query-api="menu_queryTreeApi"
      :show-delete-button="false"
      :columns="columns"
      :show-line-no="false"
      @addClick="showModal('jxhx','add')"
    >
      <template #customTitle="{text,record}">
        <icon-font :type="record.icon" />
        <qc-link @click="showModal(record.menuId,'update')">{{text}}</qc-link>
      </template>
      <template #customOperation="{record}">
        <a-button-group>
          <a-button
            size="small"
            type="primary"
            icon="plus"
            @click="showModal(record.menuId,'add')"
          >新增</a-button>
          <a-button
            v-if="!record.children"
            size="small"
            type="danger"
            icon="delete"
            @click="handleDelete(record)"
          >删除</a-button>
        </a-button-group>
      </template>
    </page-table>
    <a-modal
      title="菜单信息"
      :visible="visible"
      width="40%"
      @cancel="cancelModal"
      :footer="null"
      :centered="true"
    >
      <menu-form v-if="visible" :menu-id="currenetMenuId" :form-state="formState" ref="menuForm" />
    </a-modal>
  </div>
</template>
<script>
import { menu_queryTreeApi, menuDelete } from "@/api/org/menu";
import MenuForm from "@/views/org/menu/form";
import { menuTableColumns } from "@/profile/org/menu";

export default {
  components: { MenuForm },
  data() {
    return {
      columns: menuTableColumns,
      menu_queryTreeApi,
      visible: false,
      formState: undefined, //父菜单id(新增删除使用)
      currenetMenuId: undefined, //当前菜单id(编辑时使用)
    };
  },
  methods: {
    reloadTable() {
      this.$refs.menuPageTable.reload();
    },
    showModal(menuId, formState) {
      this.currenetMenuId = menuId;
      this.formState = formState;
      this.visible = true;
    },
    handleDelete(record) {
      menuDelete(record).then((response) => {
        this.reloadTable();
      });
    },
    cancelModal() {
      this.visible = false;
      this.reloadTable();
    },
  },
};
</script>
